<template>
	<div class="user-card">
		<div class="user-card-header">
			<img src="@/assets/imgs/detail_header_bg.png" alt="" style="height:100%" />
		</div>
		<div class="user-card-main">
			<PreviewImg :key="imageKey" class="user-card-img" :src="gloabelImage.image || nowData.avatar" :zoom-rate="1.2"></PreviewImg>
			<!-- <el-image class="user-card-img" :src="nowData.avatar" :zoom-rate="1.2" :preview-src-list="[nowData.avatar]" :initial-index="4" fit="cover" /> -->
			<div class="user-card-content">
				<p style="margin-bottom: 15px">
					<span class="text-span text-white title">{{ nowData.title }}</span>
					<span class="text-span text-white" style="margin-left: 46px">{{ userStr }}</span>
					<span class="text-span text-white" style="margin-left: 28px" v-for="(item, index) in tipList" :key="index">{{ model[item.prop] }}</span>
				</p>
				<ul class="flex">
					<li v-for="(item, index) in tagList" :key="index" class="mr8">
						<el-tag
							v-if="item.custome == 'tag' && model[item.prop]"
							:style="{...getTagType(item.code, model[item.prop]), border: 'none', '--overflow-width': '500px', '--line-clamp': 2 }"
						>
							{{ model[item.propName || item.prop] }}
						</el-tag>
						<p v-else-if="!item.custome" class="text-span">
              <span class="text-gray mr8" v-if="item.label">{{ item.label }}:</span> 
              <span>{{ model[item.prop] }}</span>
            </p>
					</li>
					<li v-if="integrityValue" class="integrity-btn">
						<el-popover
							effect="dark"
							:popper-style="{ background: 'rgba(0,0,0,0.6)' }"
							placement="bottom"
							title=""
							:width="400"
              :disabled="integrityValue=='100%'"
							trigger="click"
							@show="getIntegrityLack"
						>
							<div v-show="lackContent">
								<p class="text-bold f16">未填字段（必填）</p>
								<p>{{ lackContent }}</p>
							</div>
							<div v-show="lackMaterialContent">
								<p class="text-bold f16">未填资料（必填）</p>
								<p>{{ lackMaterialContent }}</p>
							</div>
							<template #reference>
								<p>
									<span class="mr8">材料完整度</span> <span>{{ integrityValue }}</span>
								</p>
							</template>
						</el-popover>
					</li>
				</ul>
			</div>
		</div>
		<div class="user-card-operate">
			<el-button
				v-for="(item, index) in nowData.menuBtn"
				v-auth="[item.auth]"
				:key="index"
				:type="item.type"
				:plain="item.plain"
				@click="handleOperate(item)"
				>{{ item.label }}</el-button
			>
		</div>
	</div>
</template>

<script setup lang="ts">
import bus from '@/utils/eventbus'
import default_oldman_1 from '@/assets/imgs/default_oldman_1.webp'
import default_oldman_2 from '@/assets/imgs/default_oldman_2.webp'
import default_user_1 from '@/assets/imgs/default_user_1.webp'
import default_user_2 from '@/assets/imgs/default_user_2.webp'
import { useCommonStore } from '@/stores/common'
import PreviewImg from '@/views/aplid/DetailPage/ContentListItem/FileList/PreviewImg/index.vue'
import apiMod from '@/apiMod/index'
let imageKey = ref(0)
const { gloabnowRowData, dictList } = storeToRefs(useCommonStore())
let gloabelImage = ref({
	image: '',
})

const props = defineProps<{
	title?: string
	avatar?: string
	pageName?: string
	tipList?: any
	tagList?: any
	menuBtn?: any
	model?: any
	whickComm?: string
	integrityConfig?: any
}>()

const emit = defineEmits(['change'])

const integrityValue = ref('')
const lackContent = ref('')
const lackMaterialContent = ref('')

const nowData = computed({
	get() {
		let avatar = default_oldman_1
		if (props.model?.genderLabel == '男') {
			avatar = ['服务对象管理'].includes(props.pageName) ? default_oldman_1 : default_user_1
		} else {
			avatar = ['服务对象管理'].includes(props.pageName) ? default_oldman_2 : default_user_2
		}
		return {
			title: props.model[props.title],
			avatar: props.model[props.avatar] || avatar,
			tipList: props.tipList,
			tagList: props.tagList,
			menuBtn: ['Archives', 'detail'].includes(props.whickComm) ? props.menuBtn : [],
			model: props.model,
		}
	},
	set() {},
})
const nationLabel = props.model?.nationalityLabel || props.model?.nationalLabel || props.model?.nationality || props.model?.nationLabel

const strList = [props.model?.genderLabel, props.model?.age ? props.model?.age + '岁' : '', nationLabel].filter(Boolean)
const userStr = computed(() => strList.join('  /  '))

const getTagType = (code, value) => {
	let style = {}

	if (!code) {
		return style
	}
	const { dictList } = storeToRefs(useCommonStore())
	let item: any = {}
	if (dictList.value[code]) {
		item = dictList.value[code].filter((item) => item.value == value)[0] || {}
	}
	// const item = dictList.value[code].filter((item) => item.value == value)[0] || {}
	switch (item.remarks) {
		case 'success':
			style = {
				background: 'rgba(0, 168, 112, 0.2)',
				color: '#00A870',
			}
			break
		case 'info':
			style = {
				background: 'rgb(0 0 0 / 16%)',
				color: '#1c1c28d1',
			}
			break
		case 'primary':
			style = {
				background: 'rgba(105, 158, 245, 0.2)',
				color: '#699EF5',
			}
			break
		case 'danger':
			style = {
				background: 'rgba(250, 62, 62, 0.2)',
				color: '#FA3E3E',
			}
			break
		case 'warning':
			style = {
				background: 'rgba(237, 123, 47, 0.2)',
				color: '#ED7B2F',
			}
			break

		default:
			style = {
				background: 'rgba(105, 158, 245, 0.2)',
				color: '#699EF5',
			}
			break
	}

	return style
}
const handleOperate = (item) => {
	if (item.operate !== 'delete') {
		emit('change', item)
		return
	}
	bus.emit('menu-operate', {
		...item,
		pageName: props.pageName,
	})
}

const getInitData = () => {
	const soleValue = props.model[props.integrityConfig.soleValue]
	if (!soleValue) return
	apiMod
		.view_integrity({
			...props.integrityConfig,
			soleValue: soleValue,
		})
		.then((res) => {
			integrityValue.value = res.data
		})
}
// 获取完整度必填字段
const getIntegrityLack = () => {
	let dictData = []
	switch (props.integrityConfig.baseTableName) {
		case 'dp_service_object':
			dictData = dictList.value['MATERIAL_DATA_TYPE']
			break
		case 'dp_foundation_practitioners':
			dictData = dictList.value['STAFF_MATERIAL_TYPE']
			break
		default:
			break
	}
	const soleValue = props.model[props.integrityConfig.soleValue]
	apiMod
		.view_integrity_lack({
			...props.integrityConfig,
			soleValue,
		})
		.then((res) => {
			const data = res.data
			const materialList = dictData
				.map((item) => {
					if (data.material.includes(item.value)) {
						return item.label
					}
				})
				.filter(Boolean)
			lackContent.value = (data.field || []).join('、')
			lackMaterialContent.value = materialList.join('、')
		})
}
watch(
	() => gloabnowRowData.value,
	(val) => {
		if (val.dpServiceObjects && val.dpServiceObjects.image) {
			gloabelImage.value.image = val.dpServiceObjects.image
			imageKey.value = Math.random()
		}
	},
	{ immediate: true }
)

onMounted(() => {
	setTimeout(() => {
		if (props.integrityConfig) getInitData()
	}, 50)
})
</script>

<style scoped lang="scss">
:deep(.preview-img-box) {
  width: 100%;
  height: 100%
}
.integrity-btn {
	background: #DEFFE0;
	padding: 2px 4px;
	border-radius: 5px;
	font-weight: 600;
	color: #00EB10;
}
.user-card {
	position: relative;
	margin-bottom: 31px;
  &-header {
    height: 125px;
    img {
      border-top-left-radius:10px;
      border-top-right-radius:10px;
    }
  }
	&-img {
		width: 120px;
		height:120px;
		border-radius: 50%;
		// box-shadow: 0px 10px 4px 3px #edebeb;
	}

	&-content {
		display: flex;
		flex-flow: column;
		justify-content: space-around;
		.title {
			font-family: 'Microsoft YaHei Bold';
			font-weight: 700;
			font-size: 24px;
			// font-size: 24px;
			text-align: left;
			color: #fff;
		}
		.text-span {
			padding: 0 6px;
		}
	}

	&-main {
		display: flex;
		position: absolute;
		width: calc(100% - 52px);
		left: 52px;
    gap: 20px;
    bottom: -52px;
	}
	&-operate {
		position: absolute;
		right: 52px;
		bottom: -52px;
	}
	.user-card-header {
		img {
			width: 100%;
			object-fit: cover;
		}
	}
}
</style>
